<app-toolbar>
  <nz-space>
    <button *nzSpaceItem nz-button nzType="primary" (click)="reload()">
      <i nz-icon nzType="reload" [nzSpin]="loading"></i>
      刷新
    </button>
    <app-search-box *nzSpaceItem (onSearch)="search($event)"></app-search-box>
    <ng-template [ngIf]="showAddBtn">
      <button *nzSpaceItem nz-button nzType="primary" (click)="handleEdit()">
        <i nz-icon nzType="plus"></i>
        创建设备
      </button>
    </ng-template>
    <button nz-button nzType="primary" *nzSpaceItem class="btn">
      <span nz-icon nzType="cloud-download" nzTheme="outline"></span>
      <a (click)="handleExport()" download="filename" [href]="href">导出</a>
    </button>

    <app-import *nzSpaceItem [url]="'device/import'"></app-import>

    <button
      *nzSpaceItem
      nz-button
      nzType="primary"
      nzDanger
      (click)="handleBatchDel()"
    >
      批量删除
    </button>
  </nz-space>
</app-toolbar>
<ng-template #totalTemplate let-total>总共 {{ total }} 条</ng-template>
<nz-table
  #basicTable
  [nzData]="datum"
  [nzLoading]="loading" 
  nzShowPagination
  nzShowSizeChanger
  [nzFrontPagination]="false"
  [nzTotal]="total"
  [nzShowTotal]="totalTemplate"
  (nzPageSizeChange)="pageSizeChange($event)"
  (nzPageIndexChange)="pageIndexChange($event)"
  [nzPageSize]="pageSize"
  [nzPageIndex]="pageIndex"
  (nzQueryParams)="onQuery($event)"
>
  <thead>
    <tr>
      <th
        [nzChecked]="checked"
        [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="handleAllChecked($event)"
      ></th>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="product_id">产品ID</th>
      <th nzColumnKey="name" [nzSortFn]="true">名称</th>
      <th nzColumnKey="disabled">状态</th>
      <th nzColumnKey="created" [nzSortFn]="true">日期</th>

      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr
      *ngFor="let data of basicTable.data; let i = index"
      (dblclick)="open(data.id)"
    >
      <td
        [nzChecked]="setOfCheckedId.has(data.id)"
        (nzCheckedChange)="handleItemChecked(data.id, $event)"
      ></td>
      <td>{{ data.id }}</td>
      <td>{{ data.product_id }}</td>
      <td>{{ data.name }}</td>
      <td>
        <nz-tag nzColor="success" *ngIf="!data.disabled"> 启用 </nz-tag>
        <nz-tag nzColor="error" *ngIf="data.disabled"> 禁用 </nz-tag>
      </td>
      <td>{{ data.created | date }}</td>

      <td *ngIf="!ref">
        <a (click)="open(data.id)" title="详情">
          <i nz-icon nzType="eye"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="handleEdit(data.id)">
          <i nz-icon nzType="edit"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a
          nz-popconfirm
          nzPopconfirmTitle="确定删除?"
          (nzOnConfirm)="delete(data.id)"
          (nzOnCancel)="cancel()"
          nzPopconfirmPlacement="topLeft"
        >
          <i nz-icon nzType="delete"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>

        <a *ngIf="!data.disabled" (click)="disable(1, data.id)"> 禁用</a>
        <a *ngIf="data.disabled" (click)="disable(0, data.id)"> 启用 </a>
      </td>
      <td *ngIf="ref">
        <a (click)="select(data.id)"> 选择 </a>
      </td>
    </tr>
  </tbody>
</nz-table>
